/*
    webpack.config.js  webpack的配置文件
        作用：指示webpack干哪些活（当运行webpack命令时，会加载里面的配置）
    全局安装webpack后，在该目录下直接运行webpack命令即可。
     

    注意：所有构建工具都是基于nodejs运行的，模块化采用commonjs（即ES5）规范
*/
const path = require('path')
module.exports = {
    // webpack 配置
    // 入口文件
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'built.js',
        // 输出路径
        // __dirname是nodejs的一个变量，代表当前文件的目录绝对路径
        path: path.join(__dirname, 'build')
    },
    // Loader的配置 
    module: {
        rules: [
            // 详细Loader配置
            // 不同文件类型需要配置不同Loader 
            {
                // 匹配文件匹配规则
                test: /\.css$/,
                // 使用哪些Loader进行处理
                use: [
                    // use数组中loader执行顺序：从右到左，从下到上，依次执行
                    // 创建style标签，将上面js中的样式资源插入进去，添加到header中生效 
                    'style-loader',
                    // 将css文件变成commonjs模块加载到js中，里面内容是样式字符串 
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将.less文件编译成.css文件，需要 npm i less，npm i less-loader 
                    'less-loader'
                ]
            }
        ]
    },
    // plugins的配置
    plugins: [
        // 详细plugins配置 
    ],
    // 模式 
    mode: 'development',
    // mode: 'production'
}


